<template>
  <div id="content" :style="{height:contentHeight+'px'}">
    <Card class="r-n-fs-c">
      <Select style="width: 240px;" v-model="typeSelect" @on-change="typeChange" placeholder="设施类型选择">
        <Option value="generalFacilities">通用设施</Option>
        <Option value="pileCard">桩牌</Option>
        <Option value="highConsequenceArea">高后果区</Option>
        <Option value="constructionUnits">施工作业区</Option>
        <Option value="camera">监控</Option>
      </Select>
      <Select style="width: 240px;margin-left: 5px;" v-model="page.projectId" @on-change="searchInfrastructure" clearable placeholder="所属项目">
        <Option v-for="item in projectList" :key="item.id" :value="item.id">{{item.projectName}}</Option>
      </Select>
      <Select style="width: 240px;margin-left: 5px;" v-model="searchKey" clearable @on-clear="searchKeyClear" placeholder="精确匹配查询参数">
        <Option v-for="item in searchParamList" :key="item.key" :value="item.key">{{item.show}}</Option>
      </Select>
      <Input v-model="searchValue" placeholder="请输入查询内容..." clearable style="width: 300px;margin-left: 5px;" />
      <Button @click="selectPageList(page)" type="primary" style="width: 100px;margin-left: 5px;">查询</Button>
      <Upload
          style="display: inline-block;padding-left: 5px"
          paste
          name="file"
          :format="['json','kml']"
          :show-upload-list="false"
          :before-upload="kmlLoad"
          :action="host + url.pile_card_load">
        <Button type="primary" class="r-n-c-c" :style="{width:'110px',lineHeight:'30px'}">导入[KML]
          <div style="width: 24px;line-height: 30px;display:inline-block;font-size:13px!important;text-align:center;"
               class="iconfont icon-yulan"></div>
        </Button>
      </Upload>
      <Upload
          style="display: inline-block;padding-left: 5px"
          paste
          name="file"
          :format="['kml','kml']"
          :show-upload-list="false"
          :before-upload="xlsxLoad"
          :action="host + url.pile_card_load">
        <Button type="primary" class="r-n-c-c" :style="{width:'110px',lineHeight:'30px'}">导入[XLSX]
          <div style="width: 24px;line-height: 30px;display:inline-block;font-size:13px!important;text-align:center;"
               class="iconfont icon-yulan"></div>
        </Button>
      </Upload>
    </Card>
    <Divider/>
    <div>
      <Table id="card-list-info-table" class="table" stripe
             border
             show-header
             highlight-row
             :loading="isLoading"
             :columns="tableColumns"
             :data="dataList">
      </Table>
      <Divider/>
      <Card style="margin-bottom: 15px;">
        <Page class="r-w-c-c"
              style="width: 100%"
              class-name="card-list-info-page"
              :total="page.total"
              :current="page.pageNum"
              :page-size="page.pageSize"
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
              show-elevator
              show-sizer
              show-total/>
      </Card>
    </div>
    <Modal v-model="isUploadSimpleShow" :title="modalTitleType + modalTitle2 ">
      <Form ref="selectFormRule" :rules="ruleValidate" :model="selectForm"
            style="margin-left: 0;width: 100%;">
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">名称</span>
          <FormItem prop="msName">
            <Input placeholder="名称" v-model="selectForm.name"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">编号</span>
          <FormItem prop="number">
            <Input placeholder="编号" v-model="selectForm.number"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input" v-if="typeSelect !== 'highConsequenceArea'">
          <span class="item-input-span">经度</span>
          <FormItem prop="lng">
            <Input placeholder="经度" v-model="selectForm.lng"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input" v-if="typeSelect !== 'highConsequenceArea'">
          <span class="item-input-span">纬度</span>
          <FormItem prop="lat">
            <Input placeholder="纬度" v-model="selectForm.lat"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input" v-if="typeSelect === 'highConsequenceArea'">
          <span class="item-input-span">等级</span>
          <Select style="width: 100%" v-model="selectForm.level" clearable placeholder="等级">
            <Option :value=3>三级</Option>
            <Option :value=2>二级</Option>
            <Option :value=1>一级</Option>
          </Select>
        </label>
        <label class="r-n-fs-c item-input" >
          <span class="item-input-span">描述</span>
          <FormItem prop="description">
            <Input placeholder="描述" v-model="selectForm.description"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input" v-if="typeSelect !== 'highConsequenceArea'">
          <span class="item-input-span">地址</span>
          <FormItem prop="address">
            <Input placeholder="地址" v-model="selectForm.address"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input" v-if="typeSelect === 'camera'">
          <span class="item-input-span">流地址</span>
          <FormItem prop="url">
            <Input placeholder="URL" v-model="selectForm.url"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">所属项目</span>
          <Select style="width: 100%" v-model="selectForm.projectId" clearable placeholder="所属项目">
            <Option v-for="item in projectList" :key="item.id" :value="item.id">{{item.projectName}}</Option>
          </Select>
        </label>
        <label class="r-n-fs-c item-input" v-if="selectForm.projectId !== null && selectForm.projectId !== undefined">
          <span class="item-input-span">所属管线</span>
          <Select style="width: 100%" v-model="selectForm.pipelineId" clearable placeholder="所属管线">
            <Option v-for="item in pipelineSelectList" :key="item.id" :value="item.id">{{item.name}}</Option>
          </Select>
        </label>
        <label class="r-n-fs-c item-input" v-if="selectForm.projectId !== null && selectForm.projectId !== undefined">
          <span class="item-input-span">所属类型</span>
          <Select style="width: 100%" v-model="selectForm.typeId" clearable placeholder="所属类型">
            <Option v-for="item in typeSelectList" :key="item.id" :value="item.id">{{item.name}}</Option>
          </Select>
        </label>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isUploadSimpleShow = false">取消</Button>
        <Button type="primary" @click="modalOk()">提交</Button>
      </div>
    </Modal>
    <Modal v-model="isUploadMultiShow" :title="'多'+modalTitleType + modalTitle2">
      <Form :model="selectForm"
            style="margin-left: 0;width: 100%;">
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">所属项目</span>
          <Select style="width: 100%" v-model="selectForm.projectId" clearable placeholder="所属项目">
            <Option v-for="item in projectList" :key="item.id" :value="item.id">{{item.projectName}}</Option>
          </Select>
        </label>
        <label class="r-n-fs-c item-input" v-if="selectForm.projectId !== null && selectForm.projectId !== undefined">
          <span class="item-input-span">所属管线</span>
          <Select style="width: 100%" v-model="selectForm.pipelineId" clearable placeholder="所属管线">
            <Option v-for="item in pipelineSelectList" :key="item.id" :value="item.id">{{item.name}}</Option>
          </Select>
        </label>
        <label class="r-n-fs-c item-input" v-if="selectForm.projectId !== null && selectForm.projectId !== undefined">
          <span class="item-input-span">所属类型</span>
          <Select style="width: 100%" v-model="selectForm.typeId" clearable placeholder="所属类型">
            <Option v-for="item in typeSelectList" :key="item.id" :value="item.id">{{item.name}}</Option>
          </Select>
        </label>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isUploadMultiShow=false">取消</Button>
        <Button type="primary" @click="modalOk()">提交</Button>
      </div>
    </Modal>
    <Modal v-model="isKmlModalShow" width="1000" @on-visible-change="closeKmlModal" footer-hide :title="modalTitle">
      <div style="width: 100%;position:relative;overflow: auto;background:#0009;" :style="{maxHeight:contentHeight-120+'px',width:'inherit'}">
        <div id="kml-map" :style="{height:contentHeight-120+'px',width:'100%'}"></div>
        <div class="r-n-sb-c kml-line-item" style="top:5px;padding: 0 10px;" v-if="kmlDataList.length > 1">
          <div @click="selectMultiItem(kmlMultiSelected)" class="r-n-c-c" :class="kmlMultiSelected ? 'iconfont icon-xuanze kml-line-selected':'kml-line-selected0'"></div>
          <div class="kml-line-seq" style="background:#0000;width: 50px;cursor: default;">序号</div>
          <div class="item-edr-fill kml-line-name" style="background:#0000;color: #FFFFFF;width: 100px;cursor: default;text-align: right;margin-right: 12px" >GIS信息名称</div>
          <div class="kml-line-upload iconfont icon-wenjianshangchuan" @click="uploadMultiMessage" style="width: 60px;background:#0000;">上传</div>
        </div>
        <div class="kml-line-item" :style="{top: kmlDataList.length > 1 ? '35px':'5px',maxHeight: kmlDataList.length > 1 ? (contentHeight - 160)+'px':(contentHeight - 130)+'px'}">
          <div class="r-n-sb-c" :data-kml-ms-id="item.seq" style="border-radius: 5px" v-for="(item,index) in kmlDataList" :key="item.seq">
            <div @click="selectItem(index)" v-if="kmlDataList.length > 1" class="r-n-c-c" :class="item.selected ? 'iconfont icon-xuanze kml-line-selected':'kml-line-selected0'"></div>
            <div @click="selectMsItem(item)" class="kml-line-seq">{{item.seq}}</div>
            <div class="item-edr-fill kml-line-name" @click="selectMsItem(item)">{{ item.name !== undefined ? item.name : '-' }}</div>
            <div class="kml-line-upload iconfont icon-wenjianshangchuan" @click="uploadSimpleMessage(item)"></div>
          </div>
          <div class="r-n-c-c" v-if="kmlDataList.length === 0">未解析到GIS信息</div>
        </div>
      </div>
    </Modal>
    <Modal v-model="isXlsxModalShow" width="1000" @on-cancel="closeXlsxModal" :mask-closable=false footer-hide :title="modalTitle">
      <div style="width: 100%;position:relative;overflow: auto;background:#0009;" :style="{maxHeight:contentHeight-120+'px',width:'inherit'}">
        <div id="xlsx-map" :style="{height:contentHeight-120+'px',width:'100%'}"></div>
        <div class="c-n-fs-c xlsx-content" v-if="xlsxSheetMap.size > 0">
          <div class="r-n-fs-c xlsx-sheet" >
            <div @click="selectMultiXlsxRow(xlsxMultiSelected,$event)" style="margin-left: 10px;" class="r-n-c-c" :class="xlsxMultiSelected ? 'iconfont icon-xuanze kml-line-selected':'kml-line-selected0'"></div>
            <div class="r-n-fs-c item-edr-fill">
              <div class="xlsx-sheet-item" :style="{background: item.isSelected ? '#d74e4eba':'#00000070'}" v-for="(item,index) in xlsxSheetNames" :key="index" @click="selectXlsxSheet(index,$event)">{{item.value}}</div>
            </div>
            <div class="xlsx-sheet-item r-n-fe-c" style="background:#d74e4eba;float: right" @click="uploadMultiXlsxMessage">上传</div>
          </div>
          <div id="xlsx-sheet-content" class="xlsx-sheet-content" @scroll="xlsxScroll" style="overflow:auto;border-radius: 5px;width: 100%" :style="{maxHeight: (contentHeight - 180)+'px',maxWidth: '950px'}">
            <div class="r-n-fs-c" :data-xlsx-ms-id="index" :style="{width: (row.data.length * 104 + 90) +'px'}" v-for="(row,index) in xlsxDataList" :key="index">
              <div @click="selectXlsxRow(index,$event)" style="margin-left: 10px" class="r-n-c-c kml-line-selected0"></div>
              <div class="kml-line-seq">{{index + 1}}</div>
              <div class="sheet-cell-item" :title="col" v-for="(col,index2) in row.data" :key="index2">{{ col !== undefined && col.toString().trim() !== "" ? col : "-" }}</div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
    <Modal v-model="isColumnSelectShow" width="1000" @on-visible-change="closeXlsxModal" :title="modalTitle3">
      <div style="width: 100%;position:relative;overflow: auto;background:#0009;" :style="{maxHeight:contentHeight-120+'px',width:'inherit'}">
        <div class="r-n-fs-c" id="dragContent" style="width: 950px">
          <div v-for="(col,index) in xlsxDataFirstRow" draggable="true" class="ivu-btn r-n-c-c" @dragstart="dragColStart($event,index)" style="margin: 5px;" :key="index">{{col}}</div>
        </div>
        <Divider style="margin:5px 0" v-if="isXlsxDividerShow"/>
        <div class="c-w-fs-c" style="width: 100%;">
          <div class="r-n-c-c" v-for="(key,index) in columnSelectCollection" :key="index">
            <Button style="margin: 5px;width: 100px;">{{key.showName}}</Button>
            <div class="ivu-btn r-n-c-c" style="margin: 5px;width: 100px;background:#0000;border: dashed 1px #FFFFFF;"
                @drop="onDropCol($event,key.seq)" @dragover="dragOverCol($event)"></div>
            <Icon class="iconfont icon-quxiao" v-if="key.xlsxColId !== undefined" style="color: #FFFFFF;cursor: pointer" @click="cancelDrop($event,key.seq)"></Icon>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" @click="isColumnSelectShow = false">取消</Button>
        <Button type="primary" @click="colSelectNext()">下一步</Button>
      </div>
    </Modal>
    <Modal v-model="modalTip" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>操作确认</span>
      </p>
      <div style="text-align:center">
        <p>{{ modalTipContent }}</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modalLoading" @click="modalTipOk">确认操作</Button>
      </div>
    </Modal>
  </div>
</template>

<script>

import {mapGetters, mapState} from "vuex"
import axios from "axios";
import {LeafLetMap} from "@/global/mapConfig";
import {mapUrl, Request} from "@/global/config";

export default {
  name: "Infrastructure",
  computed: {
    ...mapState(["url", "host", "resourceHost", "realSideWidth","projectList","projectDetailsMap"]),
    ...mapGetters(["contentWidth", "contentHeight"]),
  },
  data() {
    return {
      //当前基础信息类型
      typeSelect: null,
      //所有基础信息类型集合
      bsMsTypeList: ["pileCard", "generalFacilities", "highConsequenceArea", "constructionUnits", "camera"],
      bsMsTypeNameList: ["桩牌", "通用设施", "高后果区", "施工作业区", "摄像头"],
      //单信息上传弹出窗口是否显示
      isUploadSimpleShow: false,
      //多选信息弹出窗口是否显示
      isUploadMultiShow: false,
      //单信息上传表单信息数据校验
      ruleValidate: {
        msName: [
          { max: 20, message: '信息名称不能超过20个字符', trigger: 'change'}
        ],
        number: [
          { max: 20, message: '信息编号不能超过20个字符', trigger: 'change'}
        ],
        lat: [
          { required: false, type: 'string', trigger: 'change'},
          { max: 20, message: '纬度不能超过20个字符', trigger: 'change'}
        ],
        lng: [
          { required: false, type: 'string', trigger: 'change'},
          { max: 20, message: '经度不能超过20个字符', trigger: 'change'}
        ],
        url: [
          { required: false, type: 'string', trigger: 'change'},
          { max: 100, message: '拉流地址不能超过100个字符', trigger: 'change'}
        ],
        address: [
          { required: false, type: 'string', trigger: 'change'},
          { max: 100, message: '地址不能超过100个字符', trigger: 'change'}
        ],
        description: [
          { required: false, type: 'string', trigger: 'change'},
          { max: 100, message: '描述不能超过100个字符', trigger: 'change'}
        ],
      },
      //搜索框对应字段名称
      searchKey: 'number',
      //搜索框输入值
      searchValue: null,
      //表格加载中状态是否展示
      isLoading: false,
      //操作确认提示框是否显示
      modalTip: false,
      //操作确认提示框显示内容
      modalTipContent: null,
      //操作确认提示框点击确认后按钮加载中状态是否显示
      modalLoading: false,
      //是否正在改变分页大小
      isPageSizeChanging: false,
      //弹出框标题
      modalTitle: 'KML信息预览',
      //二层弹出框标题
      modalTitle2: '上传[单项导入]',
      //二层弹出框标题
      modalTitle3: '导入列选择',
      //二层弹框数据导入类型
      modalTitleType: null,
      //弹出框标题集合
      operatorType: ['KML信息预览','XLSX信息预览','上传[单项导入]','上传[多项导入]','信息更新','信息删除','导入列选择'],
      //增删改数据操作表单
      selectForm: {
        id: null,
        name: null,
        lat: null,
        lng: null,
        level: 3,
        typeId: null,
        address: null,
        sceneImage: null,
        description: null,
        pipelineId: null,
        projectId: null
      },
      //分页查询参数
      page: {
        //总数
        total: 0,
        //单页条数
        pageSize: 10,
        //当前页
        pageNum: 1,
        //倒序字段
        descParams:'id',
        id: null,
        number: null,
        systemStakeNumber: null,
        projectId: null
      },
      //桩牌列表结构
      pileCardTableColumns: [
        {
          title: '桩牌ID',
          key: 'id',
          width: 100,
          minWidth: 100,
          resizable: true,
          align: "center",
          ellipsis: true,
          sortable: true,
        },
        {
          title: '系统桩号',
          key: 'systemStakeNumber',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {systemStakeNumber} = data.row;
            if (systemStakeNumber === null || systemStakeNumber === undefined){
              return createElement('span','-');
            }
            return createElement('span',systemStakeNumber);
          }
        },
        {
          title: '现场桩号',
          key: 'sceneStakeNumber',
          resizable: true,
          width: 150,
          align: "center",
          render:function (createElement,data){
            let {sceneStakeNumber} = data.row;
            if (sceneStakeNumber === null || sceneStakeNumber === undefined){
              return createElement('span','-');
            }
            return createElement('span',sceneStakeNumber);
          }
        },
        {
          title: '位置[经度,纬度]',
          resizable: true,
          width: 300,
          minWidth: 240,
          align: "center",
          render: function (createElement,data){
            let {lng,lat,altitude} = data.row;
            return createElement('span','['+lng+','+lat+']');
          }
        },
        {
          title: '桩牌地址',
          key: 'address',
          resizable: true,
          minWidth: 120,
          align: "center",
          render:function (createElement,data){
            let {address} = data.row;
            if (address === null || address === undefined){
              return createElement('span','-');
            }
            return createElement('span',address);
          }
        },
        {
          title: '描述',
          key: 'description',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {description} = data.row;
            if (description === null || description === undefined){
              return createElement('span','-');
            }
            return createElement('span',description);
          }
        },
        {
          title: '现场图片',
          key: 'endTime',
          resizable: true,
          width: 180,
          align: "center",
          render:this.imageRender,
        },
        {
          title: '所属类型',
          key: 'pileCardTypeName',
          resizable: true,
          width: 150,
          align: "center",
          render:function (createElement,data){
            let {pileCardTypeName} = data.row;
            if (pileCardTypeName === null || pileCardTypeName === undefined){
              return createElement('span','-');
            }
            return createElement('span',pileCardTypeName);
          }
        },
        {
          title: '所属管线',
          key: 'pipelineName',
          resizable: true,
          width: 130,
          align: "center",
          render:function (createElement,data){
            let {pipelineName} = data.row;
            if (pipelineName === null || pipelineName === undefined){
              return createElement('span','-');
            }
            return createElement('span',pipelineName);
          }
        },
        {
          title: '所属项目',
          key: 'projectId',
          resizable: true,
          width: 180,
          align: "center",
          fixed: "right",
          render: Request.projectNameRender
        },
        {
          title: '操作',
          resizable: true,
          minWidth: 150,
          align: "center",
          fixed: "right",
          render: this.operatorRenderFunction
        }
      ],
      //通用设施列表结构
      generalFacilitiesTableColumns: [
        {
          title: '设施ID',
          key: 'id',
          width: 100,
          minWidth: 100,
          resizable: true,
          align: "center",
          ellipsis: true,
          sortable: true,
        },
        {
          title: '设施编号',
          key: 'number',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {number} = data.row;
            if (number === null || number === undefined){
              return createElement('span','-');
            }
            return createElement('span',number);
          }
        },
        {
          title: '设施名称',
          key: 'name',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {name} = data.row;
            if (name === null || name === undefined){
              return createElement('span','-');
            }
            return createElement('span',name);
          }
        },
        {
          title: '位置[经度,纬度]',
          resizable: true,
          width: 300,
          minWidth: 240,
          align: "center",
          render: function (createElement,data){
            let {lng,lat} = data.row;
            return createElement('span','['+lng+','+lat+']');
          }
        },
        {
          title: '描述',
          key: 'description',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {description} = data.row;
            if (description === null || description === undefined){
              return createElement('span','-');
            }
            return createElement('span',description);
          }
        },
        {
          title: '现场图片',
          key: 'endTime',
          resizable: true,
          width: 180,
          align: "center",
          render:this.imageRender,
        },
        {
          title: '负责人',
          key: 'dutyPerson',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {dutyPerson} = data.row;
            if (dutyPerson === null || dutyPerson === undefined){
              return createElement('span','-');
            }
            return createElement('span',dutyPerson);
          }
        },
        {
          title: '负责人手机号',
          key: 'dutyMobile',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {dutyMobile} = data.row;
            if (dutyMobile === null || dutyMobile === undefined){
              return createElement('span','-');
            }
            return createElement('span',dutyMobile);
          }
        },
        {
          title: '所属类型',
          key: 'generalFacilitiesTypeName',
          resizable: true,
          width: 150,
          align: "center",
          render:function (createElement,data){
            let {generalFacilitiesTypeName} = data.row;
            if (generalFacilitiesTypeName === null || generalFacilitiesTypeName === undefined){
              return createElement('span','-');
            }
            return createElement('span',generalFacilitiesTypeName);
          }
        },
        {
          title: '所属管线',
          key: 'pipelineName',
          resizable: true,
          width: 130,
          align: "center",
          render:function (createElement,data){
            let {pipelineName} = data.row;
            if (pipelineName === null || pipelineName === undefined){
              return createElement('span','-');
            }
            return createElement('span',pipelineName);
          }
        },
        {
          title: '所属项目',
          key: 'projectId',
          resizable: true,
          width: 180,
          align: "center",
          fixed: "right",
          render: Request.projectNameRender
        },
        {
          title: '操作',
          resizable: true,
          minWidth: 150,
          align: "center",
          fixed: "right",
          render: this.operatorRenderFunction
        }
      ],
      //高后果区列表结构
      highConsequenceAreaTableColumns: [
        {
          title: '高后果区ID',
          key: 'id',
          width: 130,
          minWidth: 100,
          resizable: true,
          align: "center",
          ellipsis: true,
          sortable: true,
        },
        {
          title: '区域编号',
          key: 'number',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {number} = data.row;
            if (number === null || number === undefined){
              return createElement('span','-');
            }
            return createElement('span',number);
          }
        },
        {
          title: '区域名称',
          key: 'name',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {name} = data.row;
            if (name === null || name === undefined){
              return createElement('span','-');
            }
            return createElement('span',name);
          }
        },
        {
          title: '后果等级',
          key: 'level',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {level} = data.row;
            if (level === null || level === undefined){
              return createElement('span','-');
            }
            return createElement('span',level);
          }
        },
        {
          title: '描述',
          key: 'description',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {description} = data.row;
            if (description === null || description === undefined){
              return createElement('span','-');
            }
            return createElement('span',description);
          }
        },
        {
          title: '距离',
          key: 'distance',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {distance} = data.row;
            if (distance === null || distance === undefined){
              return createElement('span','-');
            }
            return createElement('span',distance);
          }
        },
        {
          title: '起始桩号',
          key: 'startPileCardNumber',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {startPileCardNumber} = data.row;
            if (startPileCardNumber === null || startPileCardNumber === undefined){
              return createElement('span','-');
            }
            return createElement('span',startPileCardNumber);
          }
        },
        {
          title: '结束桩号',
          key: 'endPileCardNumber',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {endPileCardNumber} = data.row;
            if (endPileCardNumber === null || endPileCardNumber === undefined){
              return createElement('span','-');
            }
            return createElement('span',endPileCardNumber);
          }
        },
        {
          title: '备注',
          key: 'remark',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {remark} = data.row;
            if (remark === null || remark === undefined){
              return createElement('span','-');
            }
            return createElement('span',remark);
          }
        },
        {
          title: '负责人',
          key: 'dutyPerson',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {dutyPerson} = data.row;
            if (dutyPerson === null || dutyPerson === undefined){
              return createElement('span','-');
            }
            return createElement('span',dutyPerson);
          }
        },
        {
          title: '负责人手机号',
          key: 'dutyMobile',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {dutyMobile} = data.row;
            if (dutyMobile === null || dutyMobile === undefined){
              return createElement('span','-');
            }
            return createElement('span',dutyMobile);
          }
        },
        {
          title: '所属类型',
          key: 'highConsequenceAreasTypeName',
          resizable: true,
          width: 150,
          align: "center",
          render:function (createElement,data){
            let {highConsequenceAreasTypeName} = data.row;
            if (highConsequenceAreasTypeName === null || highConsequenceAreasTypeName === undefined){
              return createElement('span','-');
            }
            return createElement('span',highConsequenceAreasTypeName);
          }
        },
        {
          title: '所属管线',
          key: 'pipelineName',
          resizable: true,
          width: 130,
          align: "center",
          render:function (createElement,data){
            let {pipelineName} = data.row;
            if (pipelineName === null || pipelineName === undefined){
              return createElement('span','-');
            }
            return createElement('span',pipelineName);
          }
        },
        {
          title: '所属项目',
          key: 'projectId',
          resizable: true,
          width: 180,
          align: "center",
          fixed: "right",
          render: Request.projectNameRender
        },
        {
          title: '操作',
          resizable: true,
          minWidth: 150,
          align: "center",
          fixed: "right",
          render: this.operatorRenderFunction
        }
      ],
      //施工单位列表结构
      constructionUnitsTableColumns: [
        {
          title: '施工作业区ID',
          key: 'id',
          width: 150,
          minWidth: 100,
          resizable: true,
          align: "center",
          ellipsis: true,
          sortable: true,
        },
        {
          title: '编号',
          key: 'number',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {number} = data.row;
            if (number === null || number === undefined){
              return createElement('span','-');
            }
            return createElement('span',number);
          }
        },
        {
          title: '名称',
          key: 'name',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {name} = data.row;
            if (name === null || name === undefined){
              return createElement('span','-');
            }
            return createElement('span',name);
          }
        },
        {
          title: '位置[经度,纬度]',
          resizable: true,
          width: 300,
          minWidth: 240,
          align: "center",
          render: function (createElement,data){
            let {lng,lat} = data.row;
            return createElement('span','['+lng+','+lat+']');
          }
        },
        {
          title: '地址',
          key: 'address',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {address} = data.row;
            if (address === null || address === undefined){
              return createElement('span','-');
            }
            return createElement('span',address);
          }
        },
        {
          title: '描述',
          key: 'description',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {description} = data.row;
            if (description === null || description === undefined){
              return createElement('span','-');
            }
            return createElement('span',description);
          }
        },
        {
          title: '现场图片',
          key: 'endTime',
          resizable: true,
          width: 180,
          align: "center",
          render:this.imageRender,
        },
        {
          title: '安全区图片',
          key: 'endTime',
          resizable: true,
          width: 180,
          align: "center",
          render:function (createElement, data) {
            let {safeAreaImage} = data.row;
            if (safeAreaImage === null){
              return createElement('span','-')
            }else {
              return createElement('img', {
                style: {
                  height: '25px'
                },
                attrs: {
                  src: safeAreaImage
                },
              });
            }
          },
        },
        {
          title: '所属类型',
          key: 'constructionTypeName',
          resizable: true,
          width: 150,
          align: "center",
          render:function (createElement,data){
            let {constructionTypeName} = data.row;
            if (constructionTypeName === null || constructionTypeName === undefined){
              return createElement('span','-');
            }
            return createElement('span',constructionTypeName);
          }
        },
        {
          title: '所属管线',
          key: 'pipelineName',
          resizable: true,
          width: 130,
          align: "center",
          render:function (createElement,data){
            let {pipelineName} = data.row;
            if (pipelineName === null || pipelineName === undefined){
              return createElement('span','-');
            }
            return createElement('span',pipelineName);
          }
        },
        {
          title: '所属项目',
          key: 'projectId',
          resizable: true,
          width: 180,
          align: "center",
          fixed: "right",
          render: Request.projectNameRender
        },
        {
          title: '操作',
          resizable: true,
          minWidth: 150,
          align: "center",
          fixed: "right",
          render: this.operatorRenderFunction
        }
      ],
      //摄像头列表结构
      cameraTableColumns: [
        {
          title: '摄像头ID',
          key: 'id',
          width: 150,
          minWidth: 100,
          resizable: true,
          align: "center",
          ellipsis: true,
          sortable: true,
        },
        {
          title: '摄像头编号',
          key: 'number',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {number} = data.row;
            if (number === null || number === undefined){
              return createElement('span','-');
            }
            return createElement('span',number);
          }
        },
        {
          title: '摄像头名称',
          key: 'name',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {name} = data.row;
            if (name === null || name === undefined){
              return createElement('span','-');
            }
            return createElement('span',name);
          }
        },
        {
          title: '位置[经度,纬度]',
          resizable: true,
          width: 300,
          minWidth: 240,
          align: "center",
          render: function (createElement,data){
            let {lng,lat} = data.row;
            return createElement('span','['+lng+','+lat+']');
          }
        },
        {
          title: '地址',
          key: 'address',
          resizable: true,
          minWidth: 180,
          align: "center",
          render:function (createElement,data){
            let {address} = data.row;
            if (address === null || address === undefined){
              return createElement('span','-');
            }
            return createElement('span',address);
          }
        },
        {
          title: '所属类型',
          key: 'cameraTypeName',
          resizable: true,
          width: 150,
          align: "center",
          render:function (createElement,data){
            let {cameraTypeName} = data.row;
            if (cameraTypeName === null || cameraTypeName === undefined){
              return createElement('span','-');
            }
            return createElement('span',cameraTypeName);
          }
        },
        {
          title: '所属管线',
          key: 'pipelineName',
          resizable: true,
          width: 130,
          align: "center",
          render:function (createElement,data){
            let {pipelineName} = data.row;
            if (pipelineName === null || pipelineName === undefined){
              return createElement('span','-');
            }
            return createElement('span',pipelineName);
          }
        },
        {
          title: '所属项目',
          key: 'projectId',
          resizable: true,
          width: 180,
          align: "center",
          fixed: "right",
          render: Request.projectNameRender
        },
        {
          title: '操作',
          resizable: true,
          minWidth: 150,
          align: "center",
          fixed: "right",
          render: this.operatorRenderFunction
        }
      ],
      //当前展示表结构
      tableColumns: [],
      //当前基础信息列表数据
      dataList: [],
      //管线列表
      pipelineList: [],
      //桩牌类型列表
      pileCardTypeList: [],
      //通用设施类型列表
      generalFacilitiesTypeList: [],
      //高后果区类型列表
      highConsequenceAreaTypeList: [],
      //施工作业区类型列表
      constructionUnitsTypeList: [],
      //摄像头类型列表
      cameraTypeList: [],
      //当前类型列表
      typeList: [],
      //当前展示类型列表
      typeSelectList: [],
      //管线选择列表
      pipelineSelectList: [],
      //列表精确搜索项列表
      searchParamList: [
        {
          key: "id",
          show: "ID",
        },
        {
          key: "number",
          show: "信息编号",
        }
      ],
      //KML文件数据信息列表
      kmlDataList:[],
      //KML地图展示底图
      kmlMap: null,
      //KML渲染位置信息
      kmlRenderPoint: null,
      //KML渲染区域信息
      kmlRenderPolygon: null,
      //地图源
      mapSource: mapUrl.ArcGIS,
      //KML信息全选
      kmlMultiSelected: false,
      //KML解析展示框是否显示
      isKmlModalShow: false,
      //当前选择信息项
      currentMs: null,
      //xlsx Sheet名称列表
      xlsxSheetNames: [],
      //xlsx 所有Sheet数据
      xlsxSheetMap: new Map(),
      //xlsx 地图展示底图
      xlsxMap: null,
      //xlsx 解析展示框是否显示
      isXlsxModalShow: false,
      //xlsx 信息全选
      xlsxMultiSelected: false,
      xlsxDataFirstRow: [],
      xlsxDataList: [],
      isColumnSelectShow: false,
      isXlsxDividerShow: true,
      //所有信息的可选择列
      columnCollection: [
        {
          seq: 0,
          keyName:'name',
          showName: '名称',
          useType: ["pileCard", "generalFacilities", "highConsequenceArea", "constructionUnits", "camera"],
          xlsxColId: undefined
        },
        {
          seq: 1,
          keyName:'number',
          showName: '编号',
          useType: ["generalFacilities", "highConsequenceArea", "constructionUnits", "camera"],
          xlsxColId: undefined
        },
        {
          seq: 2,
          keyName:'systemStakeNumber',
          showName: '桩号',
          useType: ["pileCard"],
          xlsxColId: undefined
        },
        {
          seq: 3,
          keyName:'lng',
          showName: '经度[Lng]',
          useType: ["pileCard", "generalFacilities", "constructionUnits", "camera"],
          xlsxColId: undefined
        },
        {
          seq: 4,
          keyName:'lat',
          showName: '纬度[Lat]',
          useType: ["pileCard", "generalFacilities", "constructionUnits", "camera"],
          xlsxColId: undefined
        },
        {
          seq: 5,
          keyName:'address',
          showName: '地址',
          useType: ["pileCard", "generalFacilities", "highConsequenceArea", "constructionUnits", "camera"],
          xlsxColId: undefined
        },
        {
          seq: 6,
          keyName:'description',
          showName: '描述',
          useType: ["pileCard", "generalFacilities", "highConsequenceArea", "constructionUnits", "camera"],
          xlsxColId: undefined
        },
        {
          seq: 7,
          keyName:'url',
          showName: 'URL[拉流地址]',
          useType: [ "camera"],
          xlsxColId: undefined
        }
      ],
      //当前类型信息的所有可选择列
      columnSelectCollection: [],
      //选择导入列对象 key -> 列索引
      columnSelectObj: {}
    }
  },
  watch: {
    //监听基础信息类型选择
    typeSelect:function (e){
      //将选择的基础设施所拥有的类型赋值当前信息上传下拉选择列表
      let _typeList = e + 'TypeList';
      this.typeList = eval(this[_typeList]);
      //清空当前数据信息
      this.dataList = [];
      //根据类型查询数据渲染列表
      this.selectPageList(this.page);
      //根据当前基础信息类型选择列集合
      this.columnSelectCollection = this.columnCollection.filter(value => value.useType.includes(e))
    },
    xlsxDataList: function () {
      let self = this;
      this.$nextTick(()=>{
        self.$Spin.hide();
      })
    },
    //监听项目选择
    'selectForm.projectId':function(e) {
      //管线选择列表置空
      this.pipelineSelectList = [];
      //类型选择列表置空
      this.typeSelectList = [];
      //当选择项目后显示管线及类型选择列表
      if (e !== "" && e !== null && e !== undefined){
        //根据所属项目选择类型生成类型选择列表
        let _typeUse;
        if (this.typeSelect === this.bsMsTypeList[3]){
          _typeUse = "constructionTypeUse";
        }else{
          _typeUse = this.typeSelect + 'TypeUse';
        }
        let selectedTypeArray = eval(this.projectDetailsMap.get(e)[_typeUse]);
        for (let item of this.typeList) {
          if (selectedTypeArray.indexOf(item['id']) !== -1){
            this.typeSelectList.push(item)
          }
        }
        if(this.typeSelectList.find(((value) =>  value['id'] === this.selectForm['typeId'])) === undefined){
          this.selectForm['typeId'] = null;
        }
        //根据项目所拥有管线生成选择列表
        for (let item of this.pipelineList) {
          if (item.projectId === e){
            this.pipelineSelectList.push(item);
          }
        }
        if(this.pipelineSelectList.find(((value) =>  value['id'] === this.selectForm['pipelineId'])) === undefined){
          this.selectForm['pipelineId'] = null;
        }
      }
    }
  },
  created: function () {
    //获取各基础信息类型列表
    this.selectPileCardTypeList({pageNum: 1, pageSize: -1});
    this.selectGeneralFacilitiesTypeList({pageNum: 1, pageSize: -1});
    this.selectHighConsequenceAreaTypeList({pageNum: 1, pageSize: -1});
    this.selectConstructionTypeTypeList({pageNum: 1, pageSize: -1});
    this.selectCameraTypeTypeList({pageNum: 1, pageSize: -1});
  },
  mounted: function () {
    //获取本地存储登录信息用于
    this.selectPageList(this.page);
    this.selectPipelineList({pageSize:-1,descParams:''});
    this.typeSelect = "generalFacilities";
  },
  methods: {
    selectMultiItem(selected){
      this.kmlMultiSelected = !selected;
      for (let i in this.kmlDataList) {
        this.kmlDataList[i]['selected'] = this.kmlMultiSelected;
      }
    },
    selectItem(index){
      this.kmlDataList[index]['selected'] = !this.kmlDataList[index]['selected'];
    },
    uploadSimpleMessage(data){
      let self = this;
      if (self.currentMs !== null){
        let element = document.querySelector(`div[data-kml-ms-id="${self.currentMs['seq']}"]`);
        if (element !== null){
          for (let i = 0; i < element.children.length; i++) {
            if (i !== 0 || element.children.length === 3){
              element.children[i].style.background = "";
            }
          }
        }
      }
      self.currentMs = data;
      let element = document.querySelector(`div[data-kml-ms-id="${data['seq']}"]`);
      for (let i = 0; i < element.children.length; i++) {
        if (i !== 0 || element.children.length === 3){
          element.children[i].style.background = "#d74e4eba";
        }
      }
      this.modalTitle2 = this.operatorType[2];
      this.modalTitleType = this.bsMsTypeNameList[this.bsMsTypeList.indexOf(this.typeSelect)];
      this.$refs['selectFormRule'].resetFields();
      this.isUploadSimpleShow = true;
      this.selectForm.name = data['name'];
      if (this.bsMsTypeList.indexOf(this.typeSelect) + 1 === 3){
        this.selectForm.polygonPoints = data['data'];
      }else {
        this.selectForm.lng = data['data']['lng'];
        this.selectForm.lat = data['data']['lat'];
      }
    },
    uploadMultiMessage(){
      let result = false;
      for (let item of this.kmlDataList) {
        if (item.selected){
          result = true;
        }
      }
      if (result){
        this.isUploadMultiShow = true;
        this.modalTitle2 = this.operatorType[3];
        this.modalTitleType = this.bsMsTypeNameList[this.bsMsTypeList.indexOf(this.typeSelect)];
      }else {
        this.$Message.info("请在列表选择需要导入的信息");
      }
    },
    selectMsItem(data){
      let self = this;
      if (self.currentMs !== null){
        let element = document.querySelector(`div[data-kml-ms-id="${self.currentMs['seq']}"]`);
        if (element !== null){
          for (let i = 0; i < element.children.length; i++) {
            if (i !== 0 || element.children.length === 3){
              element.children[i].style.background = "";
            }
          }
        }
      }
      self.currentMs = data;
      let element = document.querySelector(`div[data-kml-ms-id="${data['seq']}"]`);
      for (let i = 0; i < element.children.length; i++) {
        if (i !== 0 || element.children.length === 3){
          element.children[i].style.background = "#d74e4eba";
        }
      }
      if (this.kmlMap !== null){
        if (self.typeSelect === 'generalFacilities' ||
            self.typeSelect === 'pileCard' ||
            self.typeSelect === 'constructionUnits' ||
            self.typeSelect === 'camera'){
          if (this.kmlRenderPoint !== null){
            this.kmlMap.removeLayer(this.kmlRenderPoint);
            this.kmlRenderPoint = null;
          }
          this.kmlRenderPoint = self.kmlMap.addMessagePopup(data.data)
        }else if (self.typeSelect === 'highConsequenceArea'){
          if (this.kmlRenderPolygon !== null){
            this.kmlMap.removeLayer(this.kmlRenderPolygon);
            this.kmlRenderPolygon = null;
          }
          this.kmlRenderPolygon = self.kmlMap.renderPolygon(data.data,{
            type: 'line',
            color: '#bc3d3a',
            opacity: 0.7,
            weight: 4
          });

        }
      }
    },
    closeKmlModal(e){
      if (!e){
        if (this.kmlMap !== null) {
          if (this.kmlRenderPoint !== null){
            this.kmlMap.removeLayer(this.kmlRenderPoint);
            this.kmlRenderPoint = null;
          }
          if (this.kmlRenderPolygon !== null){
            this.kmlMap.removeLayer(this.kmlRenderPolygon);
            this.kmlRenderPolygon = null;
          }
        }
        this.kmlDataList = [];
        this.selectForm['projectId'] = null;
        this.selectForm['pipelineId'] = null;
        this.selectForm['typeId'] = null;
      }
    },
    xlsxScroll(e){
      console.log(e.target.scrollTop);
    },
    typeChange(){
      this.page.pageNum = 1;
    },
    searchInfrastructure(){
      this.page.pageNum = 1;
      this.selectPageList(this.page);
    },
    modalOk(){
      if (this.selectForm.projectId === null || this.selectForm.projectId === undefined){
        this.$Message.error('所属项目未选择...');
        return;
      }
      let isValidate = false;
      this.$refs['selectFormRule'].validate((valid) => {
        if (valid) {
          isValidate = true;
        }
      })
      if (!isValidate){
        return;
      }
      if (this.modalTitle2 === this.operatorType[2]){
        this.doUploadSimpleMessage(this.selectForm);
      }
      if (this.modalTitle2 === this.operatorType[3]){
        this.doUploadMultiMessage(this.selectForm);
      }
    },
    kmlLoad(file) {
      let self = this;
      self.kmlMultiSelected = false;
      self.kmlDataList = [];
      if (self.kmlMap === null){
        setTimeout(()=>{
          self.kmlMap = new LeafLetMap(document.getElementById('kml-map'),self.mapSource);
        },200);
      }
      if (file.name.endsWith('.kml')){
        self.$Spin.show();
        let reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function(e){
          let result = e.target.result;
          if (result !== undefined){
            let options = {
              attributeNamePrefix : "@_",
              ignoreAttributes: false,
            };
            let jsonObj = self.xmlParser.parse(result, options);
            let seq = 1;
            let dataArray = [];
            function recursionParserObj(jsonObj,labelName) {
              self._.forIn(jsonObj,(v,k)=>{
                if (k === 'Document' || k === 'Placemark' || k === 'Folder'){
                  if (self._.isArray(v)){
                    recursionParserArray(v)
                  }
                }
                if (k === 'Polygon' && self.typeSelect === 'highConsequenceArea'){
                  if (v['outerBoundaryIs'] !== undefined){
                    if (v['outerBoundaryIs'] !== undefined && v['outerBoundaryIs']['LinearRing'] !== undefined &&
                        v['outerBoundaryIs']['LinearRing']['coordinates'] !== undefined){
                      let outerPolygon = v['outerBoundaryIs']['LinearRing']['coordinates'];
                      outerPolygon = outerPolygon.replaceAll(/\s+/g,' ');
                      let polygonStringArray = outerPolygon.split(" ");
                      let polygonPointArray = [];
                      self._.forEach(polygonStringArray,(v)=> {
                        let point = v.split(",");
                        polygonPointArray.push({
                          lng: point[0],
                          lat: point[1],
                          alt: point[2],
                        })
                      })
                      dataArray.push({
                        selected: false,
                        seq: seq++,
                        name: labelName,
                        data: polygonPointArray
                      })
                    }
                  }
                }
                if (k === 'Point' && (self.typeSelect === 'generalFacilities' ||
                    self.typeSelect === 'pileCard' ||
                    self.typeSelect === 'constructionUnits' ||
                    self.typeSelect === 'camera')){
                  if (v['coordinates'] !== undefined){
                    let pointArray = v['coordinates'].split(",");
                    let point = {
                      lng: pointArray[0],
                      lat: pointArray[1],
                      alt: pointArray[2]
                    }
                    dataArray.push({
                      selected: false,
                      seq: seq++,
                      name: labelName,
                      data: point
                    })
                  }
                }
                if (self._.isPlainObject(v)){
                  recursionParserObj(v,v['name'])
                }
              })
            }
            function recursionParserArray(jsonArray) {
              self._.forEach(jsonArray,(v)=>{
                if (self._.isPlainObject(v)){
                  recursionParserObj(v,v['name'])
                }
                if (self._.isArray(v)){
                  recursionParserArray(v)
                }
              })
            }
            recursionParserObj(jsonObj,'kml');
            self.$Spin.hide();
            self.modalTitle = self.operatorType[0];
            self.isKmlModalShow = true;
            self.kmlDataList = dataArray;
          }
        }
      }
      return false;
    },
    //关闭xlsx解析窗口时执行函数
    closeXlsxModal(e){
      if (!this.isXlsxModalShow){
        this.xlsxDataList = [];
      }
      if (!e){
        this.selectForm['projectId'] = null;
        this.selectForm['pipelineId'] = null;
        this.selectForm['typeId'] = null;
      }
    },
    //加载xlsx文件并解析成JSON数据
    xlsxLoad(file){
      let self = this;
      if (self.xlsxMap === null){
        setTimeout(()=>{
          self.xlsxMap = new LeafLetMap(document.getElementById('xlsx-map'),self.mapSource);
        },200);
      }
      if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')){
        self.$Spin.show();
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function(e){
          let result = e.target.result;
          let wb = self.XLSX.read(result, { type: "binary" });
          self.xlsxSheetNames = [];
          new Promise((resolve)=>{
            wb.SheetNames.forEach((value, index) => {
              self.xlsxSheetNames.push({
                value,
                seq:index,
                isSelected:false
              })
            });
            Object.keys(wb.Sheets).forEach(function(key){
              let ws = wb.Sheets[key];
              let data = self.XLSX.utils.sheet_to_json(ws, {header:1});
              self.xlsxSheetMap.set(wb.SheetNames.indexOf(key),data);
              self.$Spin.hide();
            });
            resolve();
          }).then(()=>{
            self.selectXlsxSheet(0);
          })
          self.modalTitle = self.operatorType[1];
          self.isXlsxModalShow = true;
        }
      }
      return false;
    },
    //选择表格某个Sheet，并显示数据
    selectXlsxSheet(index,e){
      this.$Spin.show();
      this.xlsxMultiSelected = false;
      this.xlsxSheetNames = this.xlsxSheetNames.map((value,index0) => {
        value['isSelected'] = index === index0;
        return value;
      });
      let sheetData = _.cloneDeep(this.xlsxSheetMap.get(index));
      if (e !== undefined){
        let element = e.target.parentElement.parentElement;
        for (let child of element.nextElementSibling.children) {
          child.firstElementChild.classList.remove('iconfont');
          child.firstElementChild.classList.remove('icon-xuanze');
          child.firstElementChild.classList.remove('kml-line-selected');
          child.firstElementChild.classList.add('kml-line-selected0');
        }
      }
      if (sheetData.length > 0){
        this.xlsxDataFirstRow = sheetData[0];
      }
      this.xlsxDataList = [];
      for (let data of sheetData) {
        this.xlsxDataList.push({
          data : data,
          selected : false
        });
      }
    },
    //选择表格所有行
    selectMultiXlsxRow(selected,e){
      let element = e.target.parentElement;
      for (let child of element.nextElementSibling.children) {
        if (!selected){
          child.firstElementChild.classList.remove('kml-line-selected0');
          child.firstElementChild.classList.add('iconfont');
          child.firstElementChild.classList.add('icon-xuanze');
          child.firstElementChild.classList.add('kml-line-selected');
        }else {
          child.firstElementChild.classList.remove('iconfont');
          child.firstElementChild.classList.remove('icon-xuanze');
          child.firstElementChild.classList.remove('kml-line-selected');
          child.firstElementChild.classList.add('kml-line-selected0');
        }
      }
      this.xlsxMultiSelected = !selected;
      for (let i in this.xlsxDataList) {
        this.xlsxDataList[i]['selected'] = this.xlsxMultiSelected;
      }
    },
    //选择表格行
    selectXlsxRow(index,e){
      let classList = e.target.classList;
      if (classList.contains('kml-line-selected0')){
        classList.remove('kml-line-selected0');
        classList.add('iconfont');
        classList.add('icon-xuanze');
        classList.add('kml-line-selected');
      }else {
        classList.remove('iconfont');
        classList.remove('icon-xuanze');
        classList.remove('kml-line-selected');
        classList.add('kml-line-selected0');
      }
      this.xlsxDataList[index]['selected'] = !this.xlsxDataList[index]['selected'];
    },
    //选择xlsx导入行
    uploadMultiXlsxMessage(){
      let result = false;
      for (let item of this.xlsxDataList) {
        if (item.selected){
          result = true;
        }
      }
      if (result){
        this.isColumnSelectShow = true;
        this.modalTitle3 = this.operatorType[6];
      }else {
        this.$Message.info("请在列表选择需要导入的信息");
      }
    },
    //确定导入选择xlsx列
    colSelectNext(){
      this.columnSelectObj = {};
      this.columnSelectCollection.forEach(key => key.xlsxColId !== undefined ? this.columnSelectObj[key.keyName] = key.xlsxColId:{});
      let isIncludeLngLat = Object.keys(this.columnSelectObj).filter(key => ['lng','lat'].includes(key)).length === 2;
      if (isIncludeLngLat){
        this.isUploadMultiShow = true;
        this.modalTitle2 = this.operatorType[3];
        this.modalTitleType = this.bsMsTypeNameList[this.bsMsTypeList.indexOf(this.typeSelect)];
      }else {
        this.$Message.error("经度列与纬度列为比选导入列!");
      }
    },
    //拖动列事件
    dragColStart(ev,index){
      ev.target.id = "dragItemId-"+index;
      let dt = ev.dataTransfer;
      dt.effectAllowed = "move";
      dt.setData("dragItemId",ev.target.id);
    },
    //放下列事件
    onDropCol(ev,seq){
      this.isXlsxDividerShow = document.getElementById('dragContent').children.length !== 0;
      let data = ev.dataTransfer.getData("dragItemId");
      let find = this.columnSelectCollection.find((value => value.seq === seq));
      let xlsxColId = Number.parseInt(data.substring(data.indexOf('-')+1));
      let moveFrom = this.columnSelectCollection.find((value => value.xlsxColId === xlsxColId));
      let moveFromIndex = this.columnSelectCollection.findIndex((value => value.xlsxColId === xlsxColId));
      if (moveFromIndex !== -1){
        let moveFromElem = ev.target.parentElement.parentElement.children[moveFromIndex].children[1];
        moveFromElem.style.border = "dashed 1px #FFFFFF";
        moveFrom.xlsxColId = undefined;
      }
      find.xlsxColId = xlsxColId;
      if (ev.target.children.length === 0){
        ev.target.appendChild(document.getElementById(data));
      }
      if (ev.target.id === ""){
        ev.target.style.border = "dashed 1px #ff6700";
        ev.preventDefault();
        ev.dataTransfer.dropEffect = "move"
      }
    },
    //取消选择列事件
    cancelDrop(ev,seq){
      let find = this.columnSelectCollection.find((value => value.seq === seq));
      let dragContent = document.getElementById("dragContent");
      let dragItem = document.getElementById("dragItemId-" + find.xlsxColId);
      find.xlsxColId = undefined;
      dragContent.appendChild(dragItem);
      ev.target.parentElement.children[1].style.border = "dashed 1px #FFFFFF";
    },
    //拖入事件
    dragOverCol(ev){
      if(ev.target.id === ""){
        ev.preventDefault();
        ev.dataTransfer.dropEffect = "move"
      }
    },
    //渲染图片
    imageRender(createElement, data) {
      let {sceneImage} = data.row,self = this;
      if (sceneImage !== undefined && sceneImage !== null){
        return createElement('img', {
          style: {
            maxHeight: '30px',
            maxWidth: '150px',
            cursor: 'pointer'
          },
          attrs: {
            title: '点击查看大图',
            src: sceneImage
          },
          on: {
            click: function () {
              self.$store.state.imageWindowUrl = sceneImage;
              self.$store.state.isImageWindowShow = true;
            }
          }
        });
      }else {
        return createElement('span', '-');
      }
    },
    //清除搜索值
    searchKeyClear(){
      let self = this;
      self.searchValue = null;
    },
    //改变页
    onPageChange(changedPage) {
      this.page.pageNum = changedPage;
      !this.isPageSizeChanging ? this.selectPageList(this.page) : {};
    },
    //单页数量改变
    onPageSizeChange(changedPageSize) {
      this.isPageSizeChanging = true;
      new Promise(resolve => {
        this.page.pageSize = changedPageSize;
        resolve(changedPageSize)
      }).then(() => {
        this.selectPageList(this.page);
        this.isPageSizeChanging = false;
      })
    },
    modalTipOk() {
      this.modalLoading = true;
      if (this.modalTitle === this.operatorType[5]){
        this.modalLoading = false;
        this.modalTip = false;
        this.deleteMs(this.selectForm)
      }
    },
    //数据操作UI渲染及点击功能
    operatorRenderFunction(createElement, data) {
      let self = this;
      let { id } = data.row;
      let btnList = [];
      btnList.push(createElement('Button', {
        'class': 'button-item',
        style: {
          width: '100px',
          border: '#5CADFF 1px dashed',
          color: '#5cadff'
        },
        attrs: {
          type: "dashed"
        },
        nativeOn: {
          click: function () {
            self.selectForm.id = id;
            self.modalTitle = self.operatorType[5];
            self.modalTip = true;
            self.modalTipContent = "将要删除" + self.bsMsTypeNameList[self.bsMsTypeList.indexOf(self.typeSelect)] + "["+id+"], 是否继续?"
          }
        },
      }, '删除'));
      return createElement("div", {'class': 'r-n-c-c'}, [
        createElement('ButtonGroup', btnList),
      ])
    },
    //获取某一类型信息的基础列表生成参数
    selectPageList(selectForm) {
      let form = Object.assign({},selectForm);
      if (this.searchValue ?? '' !== ''){
        form[this.searchKey] = this.searchValue.trim();
      }
      let urls = [ this.url.pile_card_list, this.url.general_facilities_list, this.url.high_consequence_areas_list,
        this.url.construction_units_list, this.url.camera_list ];
      let columns = [this.pileCardTableColumns, this.generalFacilitiesTableColumns,
        this.highConsequenceAreaTableColumns, this.constructionUnitsTableColumns, this.cameraTableColumns];
      let url = urls[this.bsMsTypeList.indexOf(this.typeSelect)];
      this.tableColumns = columns[this.bsMsTypeList.indexOf(this.typeSelect)];
      if(this.typeSelect === 'pileCard' && (form['number'] ?? '' !== '')){
        form['systemStakeNumber'] = form['number'];
        form['number'] = null;
      }
      this.doSelectPageList(form,url);
    },
    //获取基础信息列表
    doSelectPageList(form,url) {
      let self = this;
      self.isLoading = true;
      axios.get(url, {params: form}).then(function (response) {
        let {records,total} = response.data.content;
        self.page.total = total;
        self.dataList = records;
        self.isLoading = false;
      }).catch(function () {
        self.isLoading = false;
      });
    },
    //多信息上传
    doUploadMultiMessage(selectForm){
      let self = this;
      let form = {};
      let typeArray = ["pileCard", "generalFacilities", "highConsequenceArea", "constructionUnits", "camera"]
      form['messageType'] = typeArray.indexOf(this.typeSelect) + 1;
      if (self.isXlsxModalShow && self.isUploadMultiShow){
        let msList = []
        if (form['messageType'] !== 3){
          for (let data of this.xlsxDataList) {
            if (data['selected']){
              let itemObj = {};
              Object.keys(this.columnSelectObj).forEach(key => itemObj[key] = data['data'][self.columnSelectObj[key]]);
              msList.push(itemObj)
            }
          }
        }else {
          for (let data of this.xlsxDataList) {
            if (data['selected']){
              msList.push({
                name : data['name'],
                polygonPoints : data['data']
              })
            }
          }
        }
        // this.$Spin.show();
        selectForm['pipelineId'] !== null && selectForm['pipelineId'] !== undefined ? form['pipelineId'] = selectForm['pipelineId']:{};
        selectForm['projectId'] !== null && selectForm['projectId'] !== undefined ? form['projectId'] = selectForm['projectId']:{};
        form['data'] = msList;
        form['isMultiple'] = true;
        form['typeId'] = selectForm['typeId'];
        console.log(form)
      }
      if (self.isKmlModalShow && self.isUploadMultiShow){
        let msList = []
        if (form['messageType'] !== 3){
          for (let data of this.kmlDataList) {
            if (data['selected']){
              msList.push({
                name : data['name'],
                lat : data['data']['lat'],
                lng : data['data']['lng'],
              })
            }
          }
        }else {
          for (let data of this.kmlDataList) {
            if (data['selected']){
              msList.push({
                name : data['name'],
                polygonPoints : data['data']
              })
            }
          }
        }
        this.$Spin.show();
        selectForm['pipelineId'] !== null && selectForm['pipelineId'] !== undefined ? form['pipelineId'] = selectForm['pipelineId']:{};
        selectForm['projectId'] !== null && selectForm['projectId'] !== undefined ? form['projectId'] = selectForm['projectId']:{};
        form['data'] = msList;
        form['isMultiple'] = true;
        form['typeId'] = selectForm['typeId'];
        axios.post(self.url.general_facilities_load, form).then(function (response) {
          self.$Spin.hide();
          let {message, state} = response.data;
          if (state === 200) {
            self.selectPageList(self.page);
            self.$Message.success(message);
          } else {
            self.$Message.error(message);
          }
          self.$refs['selectFormRule'].resetFields();
          self.isUploadMultiShow = false;
        });
      }
    },
    //单信息上传
    doUploadSimpleMessage(selectForm){
      let self = this;
      let form = {};
      let data = {};
      form['messageType'] = self.bsMsTypeList.indexOf(this.typeSelect) + 1;
      this.$Spin.show();
      if (form['messageType'] !== 3){
        selectForm['lat'] !== null && selectForm['lat'] !== undefined ? data['lat'] = selectForm['lat']:{};
        selectForm['lng'] !== null && selectForm['lng'] !== undefined ? data['lng'] = selectForm['lng']:{};
        selectForm['sceneImage'] !== null && selectForm['sceneImage'] !== undefined ? data['sceneImage'] = selectForm['sceneImage']:{};
        selectForm['address'] !== null && selectForm['address'] !== undefined ? data['address'] = selectForm['address']:{};
      }else {
        selectForm['polygonPoints'] !== null && selectForm['polygonPoints'] !== undefined ? data['polygonPoints'] = selectForm['polygonPoints']:{};
        selectForm['level'] !== null && selectForm['level'] !== undefined ? data['level'] = selectForm['level']:{};
      }
      if (form['messageType'] !== 4){
        selectForm['url'] !== null && selectForm['url'] !== undefined ? data['url'] = selectForm['url']:{};
      }
      selectForm['pipelineId'] !== null && selectForm['pipelineId'] !== undefined ? form['pipelineId'] = selectForm['pipelineId']:{};
      selectForm['number'] !== null && selectForm['number'] !== undefined ? data['number'] = selectForm['number']:{};
      selectForm['name'] !== null && selectForm['name'] !== undefined ? data['name'] = selectForm['name']:{};
      selectForm['description'] !== null && selectForm['description'] !== undefined ? data['description'] = selectForm['description']:{};
      selectForm['projectId'] !== null && selectForm['projectId'] !== undefined ? form['projectId'] = selectForm['projectId']:{};
      selectForm['typeId'] !== null && selectForm['typeId'] !== undefined ? form['typeId'] = selectForm['typeId']:{};
      form['data'] = data;
      form['isMultiple'] = false;
      axios.post(self.url.general_facilities_load, form).then(function (response) {
        self.$Spin.hide();
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList(self.page);
          self.$Message.success(message);
        } else {
          self.$Message.error(message);
        }
        self.isUploadSimpleShow = false;
      });
    },
    //获取桩牌类型列表
    selectPileCardTypeList(form) {
      let self = this;
      axios.get(self.url.pile_card_type_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.pileCardTypeList = records;
      }).catch(function () {

      });
    },
    //获取通用设施类型列表
    selectGeneralFacilitiesTypeList(form) {
      let self = this;
      axios.get(self.url.general_facilities_type_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.generalFacilitiesTypeList = records;
        //默认设置通用设施类型列表为当前类型选择列表
        if (self.bsMsTypeList.indexOf(self.typeSelect) + 1 === 2){
          self.typeList = records;
        }
      }).catch(function () {

      });
    },
    //获取通用设施类型列表
    selectHighConsequenceAreaTypeList(form) {
      let self = this;
      axios.get(self.url.high_consequence_areas_type_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.highConsequenceAreaTypeList = records;
      }).catch(function () {

      });
    },
    //获取施工作业区类型列表
    selectConstructionTypeTypeList(form) {
      let self = this;
      axios.get(self.url.construction_type_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.constructionUnitsTypeList = records;
      }).catch(function () {

      });
    },
    //获取摄像头类型列表
    selectCameraTypeTypeList(form) {
      let self = this;
      axios.get(self.url.camera_type_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.cameraTypeList = records;
      }).catch(function () {

      });
    },
    //获取管线列表
    selectPipelineList(selectForm) {
      let self = this;
      let form = Object.assign({}, selectForm);
      axios.get(self.url.pipeline_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.pipelineList = records;
        self.pipelineShowList = records;
      });
    },
    deleteMs(selectForm){
      let deleteUrls = [ this.url.pile_card_delete, this.url.general_facilities_delete, this.url.high_consequence_areas_delete, this.url.construction_units_delete, this.url.camera_delete]
      let url = deleteUrls[this.bsMsTypeList.indexOf(this.typeSelect)] + selectForm['id'];
      this.doDeleteMs(url);
    },
    doDeleteMs(url) {
      let self = this;
      self.modalTip = false;
      self.modalLoading = false;
      axios.delete(url).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList(self.page);
          self.$Message.success(message);
        } else {
          self.$Message.error(message);
        }
      });
    },
  }
}
</script>

<style scoped>
#content {
  background: #FFFFFF;
  padding: 15px;
  overflow: auto;
}
.xlsx-content{
  position: absolute;
  left:5px;
  top:5px;
  z-index: 10000;
  color: #FFF;
  padding: 5px;
  border-radius: 10px;
  overflow:auto;
  height: auto;
  background: rgba(0, 0, 0, 0) radial-gradient(rgba(0, 0, 0, 0.14), rgba(13, 13, 13, 0.46)) repeat scroll 0% 0%;
}
.xlsx-sheet{
  height: 36px;
  width: 100%;
  border-radius: 5px;
  background:#bf00004a;
}
.xlsx-sheet-content{
  margin-top: 5px;
  z-index: 10000;
  color: #FFF;
  background: rgba(0, 0, 0, 0) radial-gradient(rgba(0, 0, 0, 0.14), rgba(13, 13, 13, 0.46)) repeat scroll 0% 0%;
  border-radius: 10px;
}
.xlsx-sheet-item{
  cursor: pointer;
  padding: 2px 5px;
  margin: 0 2px;
  border-radius: 5px;
}
.sheet-cell-item{
  cursor: pointer;
  padding: 5px;
  background: #00000070;
  border-radius: 5px;
  width: 100px;
  overflow: hidden;
  text-align:center;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1px 2px;
}
.kml-line-item{
  position: absolute;
  left:5px;
  z-index: 10000;
  color: #FFF;
  background: rgba(0, 0, 0, 0) radial-gradient(rgba(0, 0, 0, 0.14), rgba(13, 13, 13, 0.46)) repeat scroll 0% 0%;
  padding: 10px;
  border-radius: 10px;
  width: 300px;
  overflow:auto;
  height: auto;
}
.kml-line-name{
  line-height: 24px;
  background: #00000070;
  border-radius: 5px;
  margin: 2px 0;
  font-size: 12px;
  padding: 0 5px;
  text-align: center;
  width: 120px;
  cursor: pointer;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kml-line-upload{
  width: 24px;
  height: 24px;
  background:#00000070;
  margin-left: 10px;
  border-radius: 5px;
  line-height: 24px;
  display:inline-block;
  font-size:13px!important;
  text-align:center;
  cursor: pointer;
}
.kml-line-seq{
  width: 48px;
  height: 24px;
  background:#00000070;
  margin-right: 10px;
  border-radius: 5px;
  line-height: 24px;
  display:inline-block;
  font-size:13px!important;
  text-align:center;
  cursor: pointer;
}
.kml-line-selected{
  width: 18px;height: 18px;background:#d74e4eba;margin-right: 10px;border-radius: 5px;
  line-height: 18px;display:inline-block;font-size:12px!important;text-align:center;cursor: pointer;
}
.kml-line-selected0{
  width: 18px;
  height: 18px;
  background: #0003;
  border:solid 1px #00000070;
  margin-right: 10px;
  border-radius: 5px;
  line-height: 18px;
  display:inline-block;
  font-size:12px!important;
  text-align:center;
  cursor: pointer;
}

.item-input {
  height: 45px;
  line-height: 45px;
  margin-bottom: 10px;
}

.item-input-span {
  /*height: inherit;*/
  width: 120px;
}

.item-key {
  /*height: inherit;*/
  width: 150px;
}
.item-value {
  /*height: inherit;*/
  width: 50px;
}

.ivu-form-item-content {
  margin-left: 0 !important;
  position: relative;
  line-height: 32px;
  font-size: 14px;
}

.ivu-form-item {
  margin-bottom: 0;
  width: 100%;
}

.button-item {
  border: #19be6b 1px dashed;
  color: #19be6b;
}

.filter-item {
  margin: 0 5px;
}

.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.demo-spin-col{
  height: 20px;
  position: relative;
}
</style>
